<template>
  <div class="yh_content foSi14">
    <div class="tback">
      <el-button type="primary" class="bac6b7" @click="back">返回列表</el-button>
    </div>
    <div v-if="cardDetail" class="contents">
      <div style="display:flex;justify-content: space-between" class="thead">
        <div>
          <el-image :src="cardDetail.pic" class="touxiang" />
        </div>
        <div v-if="cardDetail.brand_id === venue.id">
          <el-popover popper-class="monitor-yt-popover" placement="bottom" width="276" trigger="click">
            <div class="wid100 dis flwa">
              <div
                :class="cardDetail.card_state === 1
                  ?'':'btn-card-handle-dis'"
                class="btn-card-handle"
                @click.stop="shuaClick(1,cardDetail)"
              >请假</div>
              <div
                :class="cardDetail.card_state === 2
                  ?'':'btn-card-handle-dis'"
                class="btn-card-handle"
              >取消请假</div>
              <div
                :class="cardDetail.card_state === 2
                  ?'':'btn-card-handle-dis'"
                class="btn-card-handle"
                @click.stop="shuaClick(3,cardDetail)"
              >销假</div>
              <div
                :class="cardDetail.card_state === 2
                  ?'':'btn-card-handle-dis'"
                class="btn-card-handle"
                @click.stop="shuaClick(4,cardDetail)"
              >延长请假</div>
              <div
                :class="cardDetail.card_state === 1
                  ?'':'btn-card-handle-dis'"
                class="btn-card-handle"
                @click.stop="shuaClick(5,cardDetail)"
              >停卡</div>
              <div
                :class="cardDetail.card_state === 7
                  ?'':'btn-card-handle-dis'"
                class="btn-card-handle"
                @click.stop="shuaClick(6,cardDetail)"
              >解除停卡</div>
              <div
                :class="cardDetail.card_state === 1 || cardDetail.card_state === 2 || cardDetail.card_state === 7
                  ?'':'btn-card-handle-dis'"
                class="btn-card-handle"
                @click.stop="shuaClick(7,cardDetail)"
              >挂失</div>
              <div
                :class="cardDetail.card_state === 5
                  ?'':'btn-card-handle-dis'"
                class="btn-card-handle"
                @click.stop="shuaClick(8,cardDetail)"
              >解挂</div>
              <div
                :class="cardDetail.card_state === 5
                  ?'':'btn-card-handle-dis'"
                class="btn-card-handle"
                @click.stop="shuaClick(9,cardDetail)"
              >补卡</div>
              <div
                :class="cardDetail.card_state === 1
                  ?'':'btn-card-handle-dis'"
                class="btn-card-handle"
                @click.stop="shuaClick(10,cardDetail)"
              >续卡</div>
              <div
                :class="cardDetail.card_state === 1 || cardDetail.card_state === 4
                  ?'':'btn-card-handle-dis'"
                class="btn-card-handle"
                @click.stop="shuaClick(11,cardDetail)"
              >卡升级</div>
              <div
                :class="cardDetail.card_state === 1 || cardDetail.card_state === 4 || cardDetail.card_state === 2 || cardDetail.card_state === 7
                  ?'':'btn-card-handle-dis'"
                class="btn-card-handle"
                @click.stop="shuaClick(12,cardDetail)"
              >退卡</div>
              <div
                :class="cardDetail.card_state === 1 || cardDetail.card_state === 4 || cardDetail.card_state === 2 || cardDetail.card_state === 7
                  ?'':'btn-card-handle-dis'"
                class="btn-card-handle"
                @click.stop="shuaClick(13,cardDetail)"
              >转卡</div>
              <div
                :class="cardDetail.card_state === 4
                  ?'':'btn-card-handle-dis'"
                class="btn-card-handle"
                @click.stop="shuaClick(14,cardDetail)"
              >开卡</div>
              <div class="btn-card-handle btn-bott" @click.stop="sahnchuClick(cardDetail.id)">删除</div>
              <div
                :class="false
                  ?'':'btn-card-handle-dis'"
                class="btn-card-handle"
              >关联家庭成员</div>
              <div
                :class="false
                  ?'':'btn-card-handle-dis'"
                class="btn-card-handle"
              >签署电子合同</div>
            </div>
            <el-button slot="reference" type="info">更多操作</el-button>
          </el-popover>
          <router-link :to="'/member/editMemberCard?id='+id">
            <el-button type="primary" class="mar-left10 bac6b7">编辑</el-button>
          </router-link>
        </div>
      </div>
      <div class="forms" style="margin-top: 15px">
        <div class="forms_item" style="width: 32.5%;padding: 15px">
          <div class="left_title"><span style="color:red;margin-right:2px">*</span>姓名</div>
          <div class="foSi14">{{ cardDetail.member_name }}</div>
        </div>
        <div class="forms_item" style="width: 32.5%;padding: 15px">
          <div class="left_title"><span style="color:red;margin-right:2px">*</span>性别</div>
          <div class="foSi14">{{ cardDetail.member_sex === 1?'男':'女' }}</div>
        </div>
        <div class="forms_item" style="width: 32.5%;padding: 15px">
          <div class="left_title"><span style="color:red;margin-right:2px">*</span>手机</div>
          <div class="foSi14">{{ cardDetail.member_tel }}</div>
        </div>
      </div>
      <div class="small_title">会员卡信息</div>
      <div class="forms">
        <div class="forms_item">
          <div class="left_title">卡号</div>
          <div class="foSi14">{{ cardDetail.card_number }}</div>
        </div>
        <div class="forms_item">
          <div class="left_title">卡名称</div>
          <div class="foSi14">{{ cardDetail.card_name }}</div>
        </div>
        <div class="forms_item">
          <div class="left_title">发卡时间</div>
          <div class="foSi14">{{ cardDetail.cards_hairpin }}</div>
        </div>
        <div class="forms_item">
          <div class="left_title">开卡时间</div>
          <div class="foSi14">{{ cardDetail.cards_activate }}</div>
        </div>
        <div class="forms_item">
          <div class="left_title">有效期至</div>
          <div class="foSi14">{{ cardDetail.cards_period }}</div>
        </div>
        <div class="forms_item">
          <div class="left_title">现余额</div>
          <div class="foSi14">{{ cardDetail.current_balance }}</div>
        </div>
        <div class="forms_item">
          <div class="left_title">实收金额</div>
          <div class="foSi14">￥{{ cardDetail.charge_card_receipts_money }}</div>
        </div>
        <div class="forms_item">
          <div class="left_title">卡原价折算</div>
          <div class="foSi14">￥{{ cardDetail.original_price }}</div>
        </div>
        <div class="forms_item">
          <div class="left_title">耗卡金额折算</div>
          <div class="foSi14">￥{{ cardDetail.consumption_card }}</div>
        </div>
        <div class="forms_item">
          <div class="left_title">剩余资产折算</div>
          <div class="foSi14">￥{{ cardDetail.remaining_assets }}</div>
        </div>
        <div class="forms_item">
          <div class="left_title">开卡场馆</div>
          <div class="foSi14">{{ cardDetail.brand_name }}</div>
        </div>
        <div class="forms_item">
          <div class="left_title">推荐办卡人</div>
          <div class="foSi14">{{ cardDetail.staff_name }}</div>
        </div>
        <div class="forms_item">
          <div class="left_title">请假情况</div>
          <div class="foSi14">已请假 {{ cardDetail.leave_days_nums }} 次，共 {{ cardDetail.leave_days }} 天</div>
        </div>
        <div class="forms_item" />
        <div
          class="forms_item"
          style="flex-direction: column;justify-content: left;align-items: normal;width: 100%"
        >
          <div class="left_title">备注</div>
          <div class="foSi14 mar-top5">{{ cardDetail.notes }}</div>
        </div>
      </div>
      <div class="small_title" style="color: #000">已关联成员</div>
      <div class="forms">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="date" label="成员姓名" />
          <el-table-column prop="name" label="关联时间" />
          <el-table-column prop="address" label="共计消费" />
          <el-table-column
            :label="$t('table.actions')"
            align="center"
            width="180"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <div class="yh_dis" style="justify-content: center;cursor: pointer">
                <router-link
                  :to="'/member/membercarddetail?id='+scope.row.id"
                  style="margin-right: 18px"
                >
                  <div class="yh_dis" style="align-items: center; margin-right: 10px">
                    <i
                      class="el-icon-bank-card"
                      style="color: rgb(25, 165, 88); font-size: 20px"
                    />详情
                  </div>
                </router-link>

                <div class="yh_dis" style="align-items: center; margin-right: 10px">
                  <i class="el-icon-bank-card" style="color: rgb(25, 165, 88); font-size: 20px" />解绑
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="forms mar-top10">
        <el-tabs v-model="nav_index" :stretch="true" style="width: 100%" @tab-click="navChange">
          <el-tab-pane label="变更记录" name="first">
            <div>
              <el-select v-model="search.operate_id" placeholder="请选择" @change="operate_change">
                <el-option
                  v-for="item in operate_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <div style="margin-left: -38px;margin-top: 20px">
                <el-timeline>
                  <el-timeline-item
                    v-for="(item, index) in cardEvent"
                    :key="index"
                    :timestamp="item.title"
                    placement="top"
                    color="#6b7cdd"
                    size="large"
                  >
                    <el-card>
                      <div
                        v-if="index === 0"
                        style="color: #6b7cdd;font-size: 15px;cursor: pointer"
                        class="dis disAl mar-bott10"
                      >
                        <i class="el-icon-printer" style="font-size: 18px" />
                        <div class="mar-left5">打印小票</div>
                      </div>
                      <div class="forms">
                        <div
                          v-for="(item1, index1) in item.content"
                          :key="index1"
                          class="forms_item"
                        >
                          <div class="left_title">{{ item1.title }}</div>
                          <div class="foSi14">{{ item1.val }}</div>
                        </div>
                      </div>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="预约记录" name="second">
            <div>
              <el-select v-model="search.appointment_status_id" placeholder="请选择" @change="lessons_change">
                <el-option
                  v-for="item in appointment_status_list"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <!--							<el-select v-model="search.operate_id" class="mar-left10" placeholder="请选择">-->
              <!--								<el-option v-for="item in operate_type" :key="item.value" :label="item.label"-->
              <!--									:value="item.value" />-->
              <!--							</el-select>-->
              <div style="margin-left: -38px;margin-top: 20px">
                <el-timeline>
                  <el-timeline-item
                    v-for="(item, index) in cardLessonsList"
                    :key="index"
                    :timestamp="item.reservation_time"
                    placement="top"
                    color="#6b7cdd"
                    size="large"
                  >
                    <el-card>
                      <div
                        style="color: #000000;font-size: 15px;cursor: pointer"
                        class="dis disAl mar-bott10 disJuB"
                      >
                        <div>{{ item.class_name }} 预约会员（{{ item.realname?item.realname:item.nickname }}）</div>
                        <div v-if="item.status == 0">已排队</div>
                        <div v-if="item.status == 1">已预约</div>
                        <div v-if="item.status == 2">已签到</div>
                        <div v-if="item.status == 3">已取消</div>
                        <div v-if="item.status == 4">已完成</div>
                      </div>
                      <div class="forms">
                        <div class="forms_item">
                          <div class="left_title">课程类型</div>
                          <div v-if="item.type == 1" class="foSi14">团课</div>
                          <div v-if="item.type == 2" class="foSi14">精品课</div>
                          <div v-if="item.type == 3" class="foSi14">私教课</div>
                          <div v-if="item.type == 4" class="foSi14">班课</div>
                        </div>
                        <div class="forms_item">
                          <div class="left_title">教练</div>
                          <div class="foSi14">{{ item.teacher_name }}</div>
                        </div>
                        <div class="forms_item">
                          <div class="left_title">上课时间</div>
                          <div class="foSi14">{{ item.class_start_time }}</div>
                        </div>
                        <div class="forms_item">
                          <div class="left_title">预约场馆</div>
                          <div class="foSi14">{{ item.cname }}</div>
                        </div>
                        <div class="forms_item">
                          <div class="left_title">获赠积分</div>
                          <div class="foSi14">--</div>
                        </div>
                        <div class="forms_item">
                          <div class="left_title">扣费信息</div>
                          <div v-if="cardDetail.card_type == 1" class="foSi14">--</div>
                          <div v-if="cardDetail.card_type == 2" class="foSi14">{{ item.reservation_people*1 }}次</div>
                          <div v-if="cardDetail.card_type == 3" class="foSi14">{{ item.pay_money }}元</div>
                        </div>
                        <div class="forms_item">
                          <div class="left_title">操作人</div>
                          <div class="foSi14">{{ item.reservation_user_name }}</div>
                        </div>
                        <div v-if="cardDetail.card_type == 3" class="forms_item">
                          <div class="left_title">耗卡金额折算</div>
                          <div class="foSi14">{{ item.money }}</div>
                        </div>

                      </div>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="刷卡记录" name="third">
            <div>
              <el-select v-model="search.appointment_status_id" placeholder="请选择">
                <el-option
                  v-for="item in appointment_status_list"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <!--							</el-select>-->
              <!--              <div style="margin-left: -38px;margin-top: 20px">-->
              <!--                <el-timeline>-->
              <!--                  <el-timeline-item-->
              <!--                    timestamp="2024-09-12 12:34"-->
              <!--                    placement="top"-->
              <!--                    color="#6b7cdd"-->
              <!--                    size="large"-->
              <!--                  >-->
              <!--                    <el-card>-->
              <!--                      <div-->
              <!--                        style="color: #000000;font-size: 15px;cursor: pointer"-->
              <!--                        class="dis disAl mar-bott10 disJuB"-->
              <!--                      >-->
              <!--                        <div>理疗-脊柱活化 预约会员（管小梅）</div>-->
              <!--                      </div>-->
              <!--                      <div class="forms">-->
              <!--                        <div class="forms_item">-->
              <!--                          <div class="left_title">课程类型</div>-->
              <!--                          <div class="foSi14">团课</div>-->
              <!--                        </div>-->
              <!--                        <div class="forms_item">-->
              <!--                          <div class="left_title">课程名称</div>-->
              <!--                          <div class="foSi14">弹力带美背</div>-->
              <!--                        </div>-->
              <!--                        <div class="forms_item">-->
              <!--                          <div class="left_title">上课时间</div>-->
              <!--                          <div class="foSi14">2024-10-21 08:00</div>-->
              <!--                        </div>-->
              <!--                        <div class="forms_item">-->
              <!--                          <div class="left_title">上课场馆</div>-->
              <!--                          <div class="foSi14">武汉校区</div>-->
              <!--                        </div>-->
              <!--                        <div class="forms_item">-->
              <!--                          <div class="left_title">老师</div>-->
              <!--                          <div class="foSi14">张龙</div>-->
              <!--                        </div>-->
              <!--                        <div class="forms_item">-->
              <!--                          <div class="left_title">操作人</div>-->
              <!--                          <div class="foSi14">现金支付</div>-->
              <!--                        </div>-->
              <!--                        <div class="forms_item">-->
              <!--                          <div class="left_title">扣费信息</div>-->
              <!--                          <div class="foSi14">22.93</div>-->
              <!--                        </div>-->
              <!--                        <div class="forms_item" />-->
              <!--                        <div class="forms_item" style="width: 100%;justify-content: left;">-->
              <!--                          <div class="left_title" style="width: 120px;">备注</div>-->
              <!--                          <div class="foSi14">擦撒擦撒大苏打实打实大大哇人大发</div>-->
              <!--                        </div>-->
              <!--                      </div>-->
              <!--                    </el-card>-->
              <!--                  </el-timeline-item>-->
              <!--                </el-timeline>-->
              <!--              </div>-->
            </div>
          </el-tab-pane>
          <el-tab-pane label="消费记录" name="fourth">
            <div>
              <el-select v-model="search.appointment_status_id" placeholder="请选择">
                <el-option
                  v-for="item in appointment_status_list"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select v-model="search.operate_id" class="mar-left10" placeholder="请选择">
                <el-option
                  v-for="item in operate_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <!--              <div style="margin-left: -38px;margin-top: 20px">-->
              <!--                <el-timeline>-->
              <!--                  <el-timeline-item-->
              <!--                    timestamp="2024-09-12 12:34"-->
              <!--                    placement="top"-->
              <!--                    color="#6b7cdd"-->
              <!--                    size="large"-->
              <!--                  >-->
              <!--                    <el-card>-->
              <!--                      <div-->
              <!--                        style="color: #000000;font-size: 15px;cursor: pointer"-->
              <!--                        class="dis disAl mar-bott10 disJuB"-->
              <!--                      >-->
              <!--                        <div>理疗-脊柱活化 预约会员（管小梅）</div>-->
              <!--                      </div>-->
              <!--                      <div class="forms">-->
              <!--                        <div class="forms_item">-->
              <!--                          <div class="left_title">消费项目</div>-->
              <!--                          <div class="foSi14">团课</div>-->
              <!--                        </div>-->
              <!--                        <div class="forms_item">-->
              <!--                          <div class="left_title">消费场馆</div>-->
              <!--                          <div class="foSi14">武汉校区</div>-->
              <!--                        </div>-->
              <!--                        <div class="forms_item">-->
              <!--                          <div class="left_title">课程名称</div>-->
              <!--                          <div class="foSi14">弹力带美背</div>-->
              <!--                        </div>-->
              <!--                        <div class="forms_item">-->
              <!--                          <div class="left_title">支付方式</div>-->
              <!--                          <div class="foSi14">次数卡支付(202410210016)</div>-->
              <!--                        </div>-->
              <!--                        <div class="forms_item">-->
              <!--                          <div class="left_title">操作人</div>-->
              <!--                          <div class="foSi14">吕洁</div>-->
              <!--                        </div>-->
              <!--                        <div class="forms_item">-->
              <!--                          <div class="left_title">次数卡扣除次数</div>-->
              <!--                          <div class="foSi14">1次</div>-->
              <!--                        </div>-->
              <!--                        <div class="forms_item">-->
              <!--                          <div class="left_title">耗卡金额折算</div>-->
              <!--                          <div class="foSi14">22.93</div>-->
              <!--                        </div>-->
              <!--                        <div class="forms_item" />-->
              <!--                        <div class="forms_item" style="width: 100%;justify-content: left;">-->
              <!--                          <div class="left_title" style="width: 120px;">备注</div>-->
              <!--                          <div class="foSi14">擦撒擦撒大苏打实打实大大哇人大发</div>-->
              <!--                        </div>-->
              <!--                      </div>-->
              <!--                    </el-card>-->
              <!--                  </el-timeline-item>-->
              <!--                </el-timeline>-->
              <!--              </div>-->
            </div>
          </el-tab-pane>
          <el-tab-pane label="商品消费记录" name="five" />
          <el-tab-pane label="惩罚记录" name="sex" />
          <el-tab-pane label="电子合同" name="seven">
            <el-table :data="tableData" stripe style="width: 100%">
              <div slot="empty" class="m-empty-box">
                <div class="mar" style="width: 168px;height: 180px;">
                  <img
                    src="https://www.jianyigongxiang.com/public/membercard/empty.png"
                    class="wh100"
                  >
                </div>
                <div class="title">暂无数据</div>
              </div>
              <el-table-column prop="date" label="合同ID" />
              <el-table-column prop="name" label="合同名称" />
              <el-table-column prop="address" label="合同状态" />
              <el-table-column prop="address" label="发起人" />
              <el-table-column prop="address" label="场馆签署人" />
              <el-table-column prop="address" label="发起时间" />
              <el-table-column
                :label="$t('table.actions')"
                align="center"
                width="180"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <div class="dis disAl">
                    <div class="dis disAl cuPo mar-rgght10">
                      <i
                        class="el-icon-delete"
                        style="color: rgb(25, 165, 88); font-size: 20px"
                      />删除
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div style="height: 800px" />
    <div v-if="shuaVisible !== 0" class="zhezhao wh100" />
    <div v-if="shuaVisible !== 0" class="zhezhaoN dis disAl disJuC wh100">
      <div class="zhezhaoWH poRel borRad10 bacFFF" style="width: 880px;">
        <div class="wid90 mar">
          <div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;border-bottom: 1px solid #d9d9d9;">
            <div class="dis disAl">
              <div v-if="shuaVisible === 1" class="foSi20 fowe800 mar-right10">请假</div>
              <div v-if="shuaVisible === 3" class="foSi20 fowe800 mar-right10">销假</div>
              <div v-if="shuaVisible === 4" class="foSi20 fowe800 mar-right10">延长请假</div>
              <div v-if="shuaVisible === 5" class="foSi20 fowe800 mar-right10">停卡</div>
              <div v-if="shuaVisible === 7" class="foSi20 fowe800 mar-right10">挂失</div>
              <div v-if="shuaVisible === 8" class="foSi20 fowe800 mar-right10">解挂</div>
              <div v-if="shuaVisible === 9" class="foSi20 fowe800 mar-right10">补卡</div>
              <div v-if="shuaVisible === 10" class="foSi20 fowe800 mar-right10">续卡</div>
              <div v-if="shuaVisible === 11" class="foSi20 fowe800 mar-right10">卡升级</div>
              <div v-if="shuaVisible === 12" class="foSi20 fowe800 mar-right10">退卡</div>
              <div v-if="shuaVisible === 13" class="foSi20 fowe800 mar-right10">转卡</div>
              <div v-if="shuaVisible === 14" class="foSi20 fowe800 mar-right10">开卡</div>
            </div>
            <svg-icon
              icon-class="guanbi"
              class="mar0 cuPo"
              style="color: #ACACAC;width: 24px;height: 24px;"
              @click.stop="shuaVisibleClick()"
            />
          </div>
          <div class="" style="padding: 20px 0;">
            <el-image :src="shuaItem.pic" style="width: 124px;height: 76px;" />
            <div class="mar-top20 hei22 foSi12" style="color: #787878;">会员卡信息</div>
            <div class="dis disAl disJuB item-l mar-bott5">
              <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                <div>卡号</div>
                <div>{{ shuaItem.card_number }}</div>
              </div>
              <div class="item-p1 item-w dis disAl disJuB hei42">
                <div>卡名称</div>
                <div>{{ shuaItem.card_name }}</div>
              </div>
            </div>
            <div class="dis disAl disJuB item-l mar-bott5">
              <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                <div>持卡人</div>
                <div>{{ shuaItem.realname }}</div>
              </div>
              <div class="item-p1 item-w dis disAl disJuB hei42">
                <div>有效期至</div>
                <div>{{ shuaItem.cards_period }}</div>
              </div>
            </div>
            <div class="dis disAl disJuB item-l mar-bott5">
              <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                <div>余额</div>
                <div>{{ shuaItem.charge_card_balance }}</div>
              </div>
              <div
                v-if="shuaVisible === 1 || shuaVisible === 3 || shuaVisible === 4"
                class="item-p1 item-w dis disAl disJuB hei42"
              >
                <div>说明</div>
                <div>{{ shuaItem.describe }}</div>
              </div>
              <div
                v-if="shuaVisible !== 1 && shuaVisible !== 3 && shuaVisible !== 4"
                class="item-p1 item-w dis disAl disJuB hei42"
              />
            </div>
            <el-form v-if="shuaVisible === 1" ref="ruleForm1" :model="ruleForm1" :rules="rules1">
              <div class="dis disAl disJuB item-l item-p1 hei42">
                <div>状态</div>
                <div>{{ shuaItem.leaves }}</div>
              </div>
              <div class="dialog-tips">
                <svg-icon icon-class="tishi" class="mar0 cuPo" style="width: 16px;height: 16px;" />
                <span class="mar-left10">请假后，卡片将暂停使用。销假后启用。到请假日期未销假自动销假。</span>
              </div>
              <div class="dis disAl disJuB item-l item-p1 hei42 mar-bott10">
                <div><span class="mar-left5" style="color: #ff0000;">*</span>请假时间</div>
                <div class="dis disAl">
                  <el-form-item class="mp0" prop="start_time">
                    <el-date-picker
                      v-model="ruleForm1.start_time"
                      style="width: 140px"
                      size="small"
                      type="date"
                      placeholder="请选择日期"
                      :picker-options="{disabledDate:dateOptions}"
                    />
                  </el-form-item>
                  <div class="mar-left15 mar-right15">至</div>
                  <el-form-item class="mp0" prop="end_time">
                    <el-date-picker
                      v-model="ruleForm1.end_time"
                      style="width: 140px"
                      size="small"
                      type="date"
                      placeholder="请选择日期"
                      :picker-options="{disabledDate:dateOptions}"
                    />
                  </el-form-item>
                  <div class="mar-left10">共{{ getDiffDay(ruleForm1.start_time,ruleForm1.end_time) }}天
                  </div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 hei42 mar-bott10">
                <el-checkbox v-model="ruleForm1.cost">收取请假费用</el-checkbox>
              </div>
              <div v-if="ruleForm1.cost" class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>请假手续费</div>
                  <el-form-item class="mp0" prop="cost_money">
                    <el-input
                      v-model="ruleForm1.cost_money"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入手续费"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>收费方式</div>
                  <el-select
                    v-model="ruleForm1.cost_pay_type"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in paytypelist"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 ">
                <div>备注</div>
                <el-input
                  v-model="ruleForm1.notes"
                  type="textarea"
                  style="width: 680px;"
                  maxlength="50"
                  :rows="4"
                  show-word-limit
                  placeholder="请输入备注"
                />
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 3" ref="ruleForm3" :model="ruleForm3" :rules="rules3">
              <div class="dis disAl disJuB item-p1 hei42 item-l">
                <div>状态</div>
                <div>{{ shuaItem.leaves }}</div>
              </div>
              <div class="dialog-tips">
                <svg-icon
                  icon-class="tishi"
                  class="mar0 cuPo"
                  style="fill: #F49352;width: 16px;height: 16px;"
                />
                <span class="mar-left10">销假后，卡片将启用。按照实际销假日期计算本次请假时长。</span>
              </div>
              <div class="dis disAl disJuB item-p1 hei42 item-l mar-bott10">
                <div>请假日期</div>
                <div>{{ shuaItem.now_start_time }}至{{ shuaItem.now_end_time }}共{{ shuaItem.now_days }}天
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 hei42 mar-bott10">
                <div><span class="mar-left5" style="color: #ff0000;">*</span>最后结束日期</div>
                <div class="dis disAl">
                  <el-form-item class="mp0" prop="start_time">
                    <el-date-picker
                      v-model="ruleForm3.end_time"
                      style="width: 140px"
                      size="small"
                      type="date"
                      placeholder="请选择日期"
                      :picker-options="{disabledDate:dateOptions1}"
                    />
                  </el-form-item>
                  <div class="mar-left10">
                    本次实际请假{{ getDiffDay(shuaItem.now_start_time,ruleForm3.end_time) }}天
                  </div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 ">
                <div>备注</div>
                <el-input
                  v-model="ruleForm3.notes"
                  type="textarea"
                  style="width: 680px;"
                  maxlength="50"
                  :rows="4"
                  show-word-limit
                  placeholder="请输入备注"
                />
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 4" ref="ruleForm4" :model="ruleForm4" :rules="rules4">
              <div class="item-l mar-bott10">
                <div class="dis disAl disJuB item-p1 hei42">
                  <div>状态</div>
                  <div>{{ shuaItem.leaves }}</div>
                </div>
                <div class="dis disAl disJuB item-p1 hei42">
                  <div>请假日期</div>
                  <div>
                    {{ shuaItem.now_start_time }}至{{ shuaItem.now_end_time }}共{{ shuaItem.now_days }}天
                  </div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 hei42 mar-bott10">
                <div><span class="mar-left5" style="color: #ff0000;">*</span>延长请假日期至</div>
                <div class="dis disAl">
                  <el-form-item class="mp0" prop="start_time">
                    <el-date-picker
                      v-model="ruleForm4.end_time"
                      style="width: 140px"
                      size="small"
                      type="date"
                      placeholder="请选择日期"
                      :picker-options="{disabledDate:dateOptions}"
                    />
                  </el-form-item>
                  <div class="mar-left10">共{{ getDiffDay(new Date(),ruleForm4.end_time) }}天
                  </div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 hei42 mar-bott10">
                <el-checkbox v-model="ruleForm4.cost">收取延长请假费用</el-checkbox>
              </div>
              <div v-if="ruleForm4.cost" class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>请假手续费</div>
                  <el-form-item class="mp0" prop="cost_money">
                    <el-input
                      v-model="ruleForm4.cost_money"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入手续费"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>收费方式</div>
                  <el-select
                    v-model="ruleForm4.cost_pay_type"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in paytypelist"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 ">
                <div>备注</div>
                <el-input
                  v-model="ruleForm4.notes"
                  type="textarea"
                  style="width: 680px;"
                  maxlength="50"
                  :rows="4"
                  show-word-limit
                  placeholder="请输入备注"
                />
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 5" ref="ruleForm5" :model="ruleForm5" :rules="rules5">
              <div class="dialog-tips">
                <svg-icon
                  icon-class="tishi"
                  class="mar0 cuPo"
                  style="fill: #F49352;width: 16px;height: 16px;"
                />
                <span class="mar-left10">停卡后，卡片将暂停使用。解除停卡后启用。</span>
              </div>
              <div class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>停卡开始日期</div>
                  <el-form-item class="mp0" prop="start_time">
                    <el-date-picker
                      v-model="ruleForm5.start_time"
                      style="width: 140px"
                      size="small"
                      type="date"
                      placeholder="请选择日期"
                      :picker-options="{disabledDate:dateOptions}"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>停卡费用</div>
                  <el-checkbox v-model="ruleForm5.cost">收取停卡费用</el-checkbox>
                </div>
              </div>
              <div v-if="ruleForm5.cost" class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>请假手续费</div>
                  <el-form-item class="mp0" prop="cost_money">
                    <el-input
                      v-model="ruleForm5.cost_money"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入手续费"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>收费方式</div>
                  <el-select
                    v-model="ruleForm5.cost_pay_type"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in paytypelist"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 ">
                <div>备注</div>
                <el-input
                  v-model="ruleForm5.notes"
                  type="textarea"
                  style="width: 680px;"
                  maxlength="50"
                  :rows="4"
                  show-word-limit
                  placeholder="请输入备注"
                />
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 7" ref="ruleForm7" :model="ruleForm7" :rules="rules7">
              <div class="dialog-tips">
                <svg-icon
                  icon-class="tishi"
                  class="mar0 cuPo"
                  style="fill: #F49352;width: 16px;height: 16px;"
                />
                <span class="mar-left10"> 挂失后，卡片将立即停用。解挂启用。</span>
              </div>
              <div class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>会员姓名：</div>
                  <div>{{ ruleForm7.name }}</div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>会员手机号：</div>
                  <div>{{ ruleForm7.mobile }}</div>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div
                    v-if="sec == 0"
                    class="que coFFF cuPo"
                    style="background: #6b7cdd;"
                    @click.stop="getSendCode(ruleForm7.mobile)"
                  >发送验证码</div>
                  <div v-if="sec > 0" class="que coFFF cuPo" style="background: #6b7cdd;">{{ sec }}s
                  </div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>验证码：</div>
                  <el-form-item class="mp0" prop="code">
                    <el-input
                      v-model="ruleForm7.code"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入验证码"
                    />
                  </el-form-item>
                </div>
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 8" ref="ruleForm8" :model="ruleForm8" :rules="rules8">
              <div class="dialog-tips">
                <svg-icon icon-class="tishi" class="mar0 cuPo" style="width: 16px;height: 16px;" />
                <span class="mar-left10">解挂后，卡片将立即启用。</span>
              </div>
              <div class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>会员手机号：</div>
                  <div>{{ ruleForm8.mobile }}</div>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div
                    v-if="sec == 0"
                    class="que coFFF cuPo"
                    style="background: #6b7cdd;"
                    @click.stop="getSendCode(ruleForm8.mobile)"
                  >发送验证码</div>
                  <div v-if="sec > 0" class="que coFFF cuPo" style="background: #6b7cdd;">{{ sec }}s
                  </div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>验证码：</div>
                  <el-form-item class="mp0" prop="code">
                    <el-input
                      v-model="ruleForm8.code"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入验证码"
                    />
                  </el-form-item>
                </div>
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 9" ref="ruleForm9" :model="ruleForm9" :rules="rules9">
              <div class="dialog-tips">
                <svg-icon
                  icon-class="tishi"
                  class="mar0 cuPo"
                  style="fill: #F49352;width: 16px;height: 16px;"
                />
                <span class="mar-left10">补卡后，旧卡将立即失效。</span>
              </div>
              <div class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span> 新卡号</div>
                  <el-form-item class="mp0" prop="card_number">
                    <el-input
                      v-model="ruleForm9.card_number"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入新卡号"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>停卡费用</div>
                  <el-checkbox v-model="ruleForm9.cost">收取停卡费用</el-checkbox>
                </div>
              </div>
              <div v-if="ruleForm9.cost" class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>补办费</div>
                  <el-form-item class="mp0" prop="cost_money">
                    <el-input
                      v-model="ruleForm9.cost_money"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入费用"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>收费方式</div>
                  <el-select
                    v-model="ruleForm9.cost_pay_type"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in paytypelist"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 ">
                <div>备注</div>
                <el-input
                  v-model="ruleForm9.notes"
                  type="textarea"
                  style="width: 680px;"
                  maxlength="50"
                  :rows="4"
                  show-word-limit
                  placeholder="请输入备注"
                />
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 10" ref="ruleForm10" :model="ruleForm10" :rules="rules10">
              <div class="hei20" />
              <div class="dis disAl disJuB item-l mar-bott5 item-p1 hei42">
                <div><span class="mar-left5" style="color: #ff0000;">*</span>续卡名称</div>
                <div class="dis disAl">
                  <el-select
                    v-model="ruleForm10.card_type"
                    class="mar-right10"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                    @change="cardTypeChange(10,ruleForm10.card_type)"
                  >
                    <el-option
                      v-for="(item,index) in cardTypeList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-select
                    v-model="ruleForm10.new_card_id"
                    class="mar-right10"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                    @change="cardChange"
                  >
                    <el-option
                      v-for="(item,index) in cardLists"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                  <div style="width: 90px;">售价：{{ cardItem.sell_price }}元</div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5 item-p1 hei42">
                <div><span class="mar-left5" style="color: #ff0000;">*</span>续卡卡号</div>
                <div>当前卡号 {{ shuaItem.card_number }}</div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>续卡后有效期至</div>
                  <el-date-picker
                    v-model="ruleForm10.cards_period"
                    style="width: 140px; margin-left: 5px"
                    size="small"
                    type="date"
                    placeholder="有效期至"
                  />
                </div>
                <div v-if="ruleForm10.card_type === 1" class="item-p1 item-w dis disAl disJuB hei42">
                  <div>余额折算到新卡（次）</div>
                  <el-form-item class="mp0" prop="discount">
                    <el-input
                      v-model="ruleForm10.discount"
                      style="width: 140px;"
                      size="small"
                      placeholder="0"
                      @blur="discountBlur"
                    />
                  </el-form-item>
                </div>
              </div>
              <div v-if="ruleForm10.card_type === 1" class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>续卡后总余额（次）</div>
                  <el-form-item class="mp0" prop="balance">
                    <el-input
                      v-model="ruleForm10.balance"
                      style="width: 140px;"
                      size="small"
                      placeholder="0"
                      @blur="balanceBlur"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>优惠（元）</div>
                  <el-form-item class="mp0" prop="discount_amount">
                    <el-input
                      v-model="ruleForm10.discount_amount"
                      style="width: 140px;"
                      size="small"
                      placeholder="0"
                      @blur="amountBlur"
                    />
                  </el-form-item>
                </div>
                <div v-if="ruleForm10.card_type === 1" class="item-p1 item-w dis disAl disJuB hei42">
                  <div>加赠（次）</div>
                  <el-form-item class="mp0" prop="add_bonus">
                    <el-input
                      v-model="ruleForm10.add_bonus"
                      style="width: 140px;"
                      size="small"
                      placeholder="0"
                      @blur="discountBlur"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>赠送积分数（分）</div>
                  <el-form-item class="mp0" prop="give_integral">
                    <el-input
                      v-model="ruleForm10.give_integral"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入积分"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>付款方式</div>
                  <el-select
                    v-model="ruleForm10.pay_type"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in paytypelist"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>优惠券</div>
                  <el-select
                    v-model="ruleForm10.coupon_id"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in couponList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>实收金额（元）</div>
                  <el-form-item class="mp0" prop="amount">
                    <el-input
                      v-model="ruleForm10.amount"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入金额"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 ">
                <div>备注</div>
                <el-input
                  v-model="ruleForm10.notes"
                  type="textarea"
                  style="width: 680px;"
                  maxlength="500"
                  :rows="4"
                  show-word-limit
                  placeholder="请输入备注"
                />
              </div>
              <div class=" dialog-tips" style="margin-top: 10px;">
                <svg-icon
                  icon-class="tishi"
                  class="mar0 cuPo"
                  style="fill: #F49352;width: 16px;height: 16px;"
                />
                <span class="mar-left10">续卡后预约签到规则均按选择的新卡的规则执行</span>
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 11" ref="ruleForm11" :model="ruleForm11" :rules="rules11">
              <div class="hei20" />
              <div class="dis disAl disJuB item-l mar-bott5 item-p1 hei42">
                <div><span class="mar-left5" style="color: #ff0000;">*</span>续卡名称</div>
                <div class="dis disAl">
                  <el-select
                    v-model="ruleForm11.card_type"
                    class="mar-right10"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                    @change="cardTypeChange(11,ruleForm11.card_type)"
                  >
                    <el-option
                      v-for="(item,index) in cardTypeList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-select
                    v-model="ruleForm11.new_card_id"
                    class="mar-right10"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                    @change="cardChange"
                  >
                    <el-option
                      v-for="(item,index) in cardLists"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                  <div style="width: 90px;">售价：{{ cardItem.sell_price }}元</div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5 item-p1 hei42">
                <div><span class="mar-left5" style="color: #ff0000;">*</span>续卡卡号</div>
                <div>当前卡号 {{ shuaItem.card_number }}</div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>升级后有效期至</div>
                  <el-date-picker
                    v-model="ruleForm11.cards_period"
                    style="width: 140px; margin-left: 5px"
                    size="small"
                    type="date"
                    placeholder="有效期至"
                  />
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>优惠（元）</div>
                  <el-form-item class="mp0" prop="discount_amount">
                    <el-input
                      v-model="ruleForm11.discount_amount"
                      style="width: 140px;"
                      size="small"
                      placeholder="0"
                      @blur="amountBlur"
                    />
                  </el-form-item>
                </div>
                <div v-if="ruleForm11.card_type === 1" class="item-p1 item-w dis disAl disJuB hei42">
                  <div>加赠（次）</div>
                  <el-form-item class="mp0" prop="add_bonus">
                    <el-input
                      v-model="ruleForm11.add_bonus"
                      style="width: 140px;"
                      size="small"
                      placeholder="0"
                      @blur="discountBlur"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>现卡折价（元）</div>
                  <el-form-item class="mp0" prop="discount">
                    <el-input
                      v-model="ruleForm11.discount"
                      style="width: 140px;"
                      size="small"
                      placeholder="0"
                      @blur="discountBlur"
                    />
                  </el-form-item>
                </div>
                <div v-if="ruleForm11.card_type === 1" class="item-p1 item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>升级后余额（次）</div>
                  <el-form-item class="mp0" prop="balance">
                    <el-input
                      v-model="ruleForm11.balance"
                      style="width: 140px;"
                      size="small"
                      placeholder="0"
                      @blur="balanceBlur"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>赠送积分数（分）</div>
                  <el-form-item class="mp0" prop="give_integral">
                    <el-input
                      v-model="ruleForm11.give_integral"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入积分"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>付款方式</div>
                  <el-select
                    v-model="ruleForm11.pay_type"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in paytypelist"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>优惠券</div>
                  <el-select
                    v-model="ruleForm11.coupon_id"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in couponList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>实收金额（元）</div>
                  <el-form-item class="mp0" prop="amount">
                    <el-input
                      v-model="ruleForm11.amount"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入金额"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 ">
                <div>备注</div>
                <el-input
                  v-model="ruleForm11.notes"
                  type="textarea"
                  style="width: 680px;"
                  maxlength="500"
                  :rows="4"
                  show-word-limit
                  placeholder="请输入备注"
                />
              </div>
              <div class=" dialog-tips" style="margin-top: 10px;">
                <svg-icon
                  icon-class="tishi"
                  class="mar0 cuPo"
                  style="fill: #F49352;width: 16px;height: 16px;"
                />
                <span class="mar-left10">卡升级后预约签到规则均按选择的新卡的规则执行</span>
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 12" ref="ruleForm12" :model="ruleForm12" :rules="rules12">
              <div class="hei20" />
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>现卡折价</div>
                  <el-form-item class="mp0" prop="cost_money1">
                    <el-input
                      v-model="ruleForm12.cost_money1"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入金额"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>退卡手续费</div>
                  <el-form-item class="mp0" prop="cost_money">
                    <el-input
                      v-model="ruleForm12.cost_money"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入金额"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>协议退款金额</div>
                  <el-form-item class="mp0" prop="cost_money2">
                    <el-input
                      v-model="ruleForm12.cost_money2"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入金额"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>退款路径</div>
                  <el-select
                    v-model="ruleForm12.cost_pay_type"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in paytypelist"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 ">
                <div>备注</div>
                <el-input
                  v-model="ruleForm12.notes"
                  type="textarea"
                  style="width: 680px;"
                  maxlength="500"
                  :rows="4"
                  show-word-limit
                  placeholder="请输入备注"
                />
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 13" ref="ruleForm13" :model="ruleForm13" :rules="rules13">
              <div class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>持卡会员手机号</div>
                  <div>{{ ruleForm13.mobile }}</div>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div
                    v-if="sec == 0"
                    class="que coFFF cuPo"
                    style="background: #6b7cdd;"
                    @click.stop="getSendCode(ruleForm13.mobile)"
                  >发送验证码</div>
                  <div v-if="sec > 0" class="que coFFF cuPo" style="background: #6b7cdd;">{{ sec }}s
                  </div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>验证码：</div>
                  <el-form-item class="mp0" prop="code">
                    <el-input
                      v-model="ruleForm13.code"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入验证码"
                    />
                  </el-form-item>
                </div>
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 14" ref="ruleForm14" :model="ruleForm14" :rules="rules14">
              <div class="dialog-tips">
                <svg-icon
                  icon-class="tishi"
                  class="mar0 cuPo"
                  style="fill: #F49352;width: 16px;height: 16px;"
                />
                <span class="mar-left10">开卡需带卡，否则需要身份验证。</span>
              </div>
              <div class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>验证</div>
                  <el-checkbox v-model="ruleForm14.cost">验证会员身份</el-checkbox>
                </div>
              </div>
              <div v-if="ruleForm14.cost">
                <div class="dis disAl disJuB item-l mar-bott10">
                  <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                    <div><span class="mar-left5" style="color: #ff0000;">*</span>会员姓名：</div>
                    <div>{{ ruleForm14.name }}</div>
                  </div>
                </div>
                <div class="dis disAl disJuB item-l mar-bott10">
                  <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                    <div><span class="mar-left5" style="color: #ff0000;">*</span>会员手机号：</div>
                    <div>{{ ruleForm14.mobile }}</div>
                  </div>
                  <div class="item-p1 item-w dis disAl disJuB hei42">
                    <div
                      v-if="sec == 0"
                      class="que coFFF cuPo"
                      style="background: #6b7cdd;"
                      @click.stop="getSendCode(ruleForm14.mobile)"
                    >发送验证码</div>
                    <div v-if="sec > 0" class="que coFFF cuPo" style="background: #6b7cdd;">{{ sec }}s
                    </div>
                  </div>
                </div>
                <div class="dis disAl disJuB item-l mar-bott10">
                  <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                    <div><span class="mar-left5" style="color: #ff0000;">*</span>验证码：</div>
                    <el-form-item class="mp0" prop="code">
                      <el-input
                        v-model="ruleForm14.code"
                        style="width: 140px;"
                        size="small"
                        placeholder="请输入验证码"
                      />
                    </el-form-item>
                  </div>
                </div>
              </div>
            </el-form>
          </div>
          <div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
            <div class="mar-right20 que cuPo" style="background: #6b7cdd;" @click.stop="submitForm()">确认
            </div>
            <div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">取消</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import {
  getXuan
} from '@/utils/limits.js'
import {
  mapGetters
} from 'vuex' // Secondary package based on el-pagination
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import {
  searchSousuo,
  cardList,
  AskForLeave,
  AskForLeaveDetails,
  cardGetUser,
  AskForLeaveExtend,
  saleLeave,
  reportLoss,
  relieveStopCard,
  cardSearch2,
  getCardDetails,
  cardEventRecord,
  cardDel,
  relieveReportLoss,
  cardReplacement,
  cardUpgrade,
  stopCard,
  cardRefund,
  cardLessonsList,
  ActCard
} from '@/api/member'
import {
  uploadimg, // 图片上传
  sendCode // 获取验证码
} from '@/api/utils'
export default {
  name: 'Membercarddetail',
  components: {},
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    const costMoney1 = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (!this.ruleForm1.cost) {
        callback()
      } else if (!parseFloat(value) || !value || value < 0 || len > 2) {
        callback(new Error('请输入手续费（最小单位到分）'))
      } else {
        callback()
      }
    }
    const costMoney4 = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (!this.ruleForm4.cost) {
        callback()
      } else if (!parseFloat(value) || !value || value < 0 || len > 2) {
        callback(new Error('请输入手续费（最小单位到分）'))
      } else {
        callback()
      }
    }
    const costMoney5 = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (!this.ruleForm5.cost) {
        callback()
      } else if (!parseFloat(value) || !value || value < 0 || len > 2) {
        callback(new Error('请输入手续费（最小单位到分）'))
      } else {
        callback()
      }
    }
    const costMoney9 = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (!this.ruleForm9.cost) {
        callback()
      } else if (!parseFloat(value) || !value || value < 0 || len > 2) {
        callback(new Error('请输入补办费（最小单位到分）'))
      } else {
        callback()
      }
    }
    const costMoney12 = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (Number(value) === 0) {
        callback()
      } else if (!parseFloat(value) || value < 0 || len > 2) {
        callback(new Error('请输入正数'))
      } else {
        callback()
      }
    }
    const costMoney121 = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (!parseFloat(value) || !value || value < 0 || len > 2) {
        callback(new Error('请输入正数'))
      } else {
        callback()
      }
    }
    const codeValidator = (rule, value, callback) => {
      if (!value && this.ruleForm14.cost) {
        callback(new Error('请输入验证码'))
      } else {
        callback()
      }
    }
    const discountVal = (rule, value, callback) => {
      if ((this.ruleForm10.card_type === 1 && this.shuaVisible === 10) || (this.ruleForm11.card_type === 1 &&
						this.shuaVisible === 11)) {
        var len = 0
        if (value) {
          var tem = value.toString().split('.')
          len = tem.length >= 2 ? tem[1].length : 0
        }
        if (Number(value) === 0) {
          callback()
        } else if (!parseFloat(value) || !value || value < 0 || len >= 1) {
          callback(new Error('请输入正数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const balanceVal = (rule, value, callback) => {
      if ((this.ruleForm10.card_type === 1 && this.shuaVisible === 10) || (this.ruleForm11.card_type === 1 &&
						this.shuaVisible === 11)) {
        var len = 0
        if (value) {
          var tem = value.toString().split('.')
          len = tem.length >= 2 ? tem[1].length : 0
        }
        if (Number(value) === 0) {
          callback()
        } else if (!parseFloat(value) || value < 0 || len > 2) {
          callback(new Error('请输入正数'))
        } else {
          callback()
        }
      }
    }
    const discountAmount = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (!value || Number(value) === 0) {
        callback()
      } else if (!parseFloat(value) || value < 0 || len > 2) {
        callback(new Error('请输入数值,最小单位为分'))
      } else {
        callback()
      }
    }
    const giveIntegral = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (!value) {
        callback()
      } else if (!parseFloat(value) || value < 1 || value > 10000000 || len > 2) {
        callback(new Error('请输入1-10000000之间的正整数或留空'))
      } else {
        callback()
      }
    }

    return {
      sec: 0,
      ruleForm11: {
        card_type: 2,
        new_card_id: null,
        cards_period: null,
        discount_amount: null,
        add_bonus: null,
        balance: null,
        discount: null,
        give_integral: null,
        pay_type: 1,
        coupon_id: null,
        amount: null,
        notes: null
      },
      rules11: {
        discount: [{
          required: true,
          trigger: 'blur',
          validator: discountVal
        }],
        balance: [{
          required: true,
          trigger: 'blur',
          validator: balanceVal
        }],
        discount_amount: [{
          required: true,
          trigger: 'blur',
          validator: discountAmount
        }],
        add_bonus: [{
          required: true,
          trigger: 'blur',
          validator: balanceVal
        }],
        give_integral: [{
          required: true,
          trigger: 'blur',
          validator: giveIntegral
        }],
        amount: [{
          required: true,
          trigger: 'blur',
          validator: discountAmount
        }]

      },
      ruleForm10: {
        card_type: 2,
        new_card_id: null,
        cards_period: null,
        discount_amount: null,
        add_bonus: null,
        balance: null,
        discount: null,
        give_integral: null,
        pay_type: 1,
        coupon_id: null,
        amount: null,
        notes: null
      },
      rules10: {
        discount: [{
          required: true,
          trigger: 'blur',
          validator: discountVal
        }],
        balance: [{
          required: true,
          trigger: 'blur',
          validator: balanceVal
        }],
        discount_amount: [{
          required: true,
          trigger: 'blur',
          validator: discountAmount
        }],
        add_bonus: [{
          required: true,
          trigger: 'blur',
          validator: balanceVal
        }],
        give_integral: [{
          required: true,
          trigger: 'blur',
          validator: giveIntegral
        }],
        amount: [{
          required: true,
          trigger: 'blur',
          validator: discountAmount
        }]

      },
      couponList: [],
      cardTypeList: [{
        label: '期限',
        value: 1
      }, {
        label: '次数',
        value: 2
      }],
      cardLists: [],
      shuaItem: null,
      ruleForm14: {
        cost: false,
        name: null,
        mobile: null,
        code: null
      },
      rules14: {
        code: [{
          required: true,
          trigger: 'blur',
          validator: codeValidator
        }]
      },
      ruleForm13: {
        mobile: null,
        code: null
      },
      rules13: {
        code: [{
          required: true,
          trigger: 'blur',
          message: '请选择验证码'
        }]
      },
      ruleForm12: {
        cost_money1: null,
        cost_money2: null,
        cost_money: null,
        cost_pay_type: 1,
        notes: null
      },
      rules12: {
        card_number: [{
          required: true,
          trigger: 'blur',
          message: '请输入新卡号'
        }],
        cost_money2: [{
          required: true,
          trigger: 'blur',
          validator: costMoney121
        }],
        cost_money1: [{
          required: true,
          trigger: 'blur',
          validator: costMoney121
        }],
        cost_money: [{
          required: true,
          trigger: 'blur',
          validator: costMoney12
        }]
      },
      ruleForm9: {
        card_number: null,
        cost: false,
        cost_money: null,
        cost_pay_type: 1,
        notes: null
      },
      rules9: {
        card_number: [{
          required: true,
          trigger: 'blur',
          message: '请输入新卡号'
        }],
        cost_money: [{
          required: true,
          trigger: 'blur',
          validator: costMoney9
        }]
      },
      ruleForm8: {
        mobile: null,
        code: null
      },
      rules8: {
        code: [{
          required: true,
          trigger: 'blur',
          message: '请选择验证码'
        }]
      },
      ruleForm7: {
        name: null,
        mobile: null,
        code: null
      },
      rules7: {
        code: [{
          required: true,
          trigger: 'blur',
          message: '请选择验证码'
        }]
      },
      ruleForm5: {
        start_time: null,
        cost: false,
        cost_money: null,
        cost_pay_type: 1,
        notes: null
      },
      rules5: {
        start_time: [{
          required: true,
          trigger: 'change',
          message: '请选择日期'
        }],
        cost_money: [{
          required: true,
          trigger: 'blur',
          validator: costMoney5
        }]
      },
      ruleForm3: {
        end_time: null,
        notes: null
      },
      rules3: {
        end_time: [{
          required: true,
          trigger: 'change',
          message: '请选择日期'
        }]
      },
      ruleForm4: {
        end_time: null,
        cost: false,
        cost_money: null,
        cost_pay_type: 1,
        notes: null
      },
      rules4: {
        end_time: [{
          required: true,
          trigger: 'change',
          message: '请选择日期'
        }],
        cost_money: [{
          required: true,
          trigger: 'blur',
          validator: costMoney4
        }]
      },
      ruleForm1: {
        start_time: null,
        end_time: null,
        cost: false,
        cost_money: null,
        cost_pay_type: 1,
        notes: null
      },
      rules1: {
        start_time: [{
          required: true,
          trigger: 'change',
          message: '请选择日期'
        }],
        end_time: [{
          required: true,
          trigger: 'change',
          message: '请选择日期'
        }],
        cost_money: [{
          required: true,
          trigger: 'blur',
          validator: costMoney1
        }]
      },
      paytypelist: [{
        label: '商户扫码(微信/支付宝/云闪付)',
        value: 1
      }, {
        label: '用户扫码(收付款)',
        value: 2
      }, {
        label: '现金支付',
        value: 3
      }, {
        label: '线下支付(银行卡)',
        value: 5
      }, {
        label: '线下支付(微信)',
        value: 6
      }, {
        label: '线下支付(支付宝)',
        value: 7
      }, {
        label: '线下支付(其他)',
        value: 8
      }],
      shuaVisible: 0,
      cardItem: null,
      dateOptions(time) {
        return time.getTime() < Date.now() - 8.64e7
      },
      dateOptions1(time) {
        return time.getTime() >= Date.now() - 8.64e6
      },
      list: null,
      total: 0,
      listLoading: false,
      // 变更记录搜索
      operate_type: [{
        label: '不指定',
        value: 0
      }, {
        label: '发卡',
        value: 1
      }, {
        label: '开卡',
        value: 2
      }, {
        label: '请假',
        value: 3
      }, {
        label: '退卡',
        value: 4
      }, {
        label: '补卡',
        value: 5
      }, {
        label: '挂失',
        value: 6
      }, {
        label: '续卡',
        value: 7
      }, {
        label: '转卡',
        value: 8
      }, {
        label: '解挂',
        value: 9
      }, {
        label: '停卡',
        value: 10
      }, {
        label: '解除停卡',
        value: 11
      }, {
        label: '卡升级',
        value: 12
      }, {
        label: '编辑会员卡',
        value: 13
      }, {
        label: '家庭成员操作',
        value: 14
      }, {
        label: '批量延期',
        value: 15
      }],
      // 预约状态搜索
      appointment_status_list: [
        {
          label: '全部',
          value: ''
        }, {
          label: '已排队',
          value: 0
        }, {
          label: '已预约',
          value: 1
        }, {
          label: '已取消',
          value: 2
        }, {
          label: '已签到',
          value: 3
        }, {
          label: '未签到',
          value: 4
        }],
      // 操作人搜索
      operate_user: [{
        label: '不指定',
        value: 0
      }, {
        label: '不指定',
        value: 0
      }],
      venue: '',
      search: {
        membership: [],
        // 变更记录->下拉搜索
        operate_id: 0,
        appointment_status_list: 0,
        appointment_status_id: ''

      },
      nav_index: 'first',
      form: {
        name: '',
        gender: 1,
        city: ''
      },
      options: [],

      listQuery: {
        page: 1,
        limit: 20
      },
      tableData: [],
      // 防止重复提交
      loading: false,
      // 裁剪过后的图片
      imgUrl: '',
      id: '',
      cardDetail: null,
      cardEvent: [],
      cardLessonsList: []
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    sessionStorage.setItem('membercard', true)
    this.venue = JSON.parse(localStorage.getItem('venue'))
    var query = this.$route.query
    this.id = query.id
    var xuanList = [{
      name: '会员卡详情',
      url: '/member/membercarddetail?id=' + query.id,
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
    this.getCardEventRecord()
    this.getList()
    this.getCardLessonsList()
  },
  methods: {
    getCardLessonsList() {
      console.log('come')
      var params = {
        'card_id': this.id,
        'status': this.search.appointment_status_id
      }
      cardLessonsList(params).then(response => {
        const {
          data
        } = response
        console.log(data)
        this.cardLessonsList = data
      }).catch(error => {
        console.log(error)
      })
    },
    operate_change(e) {
      console.log(e)
      this.getCardEventRecord()
    },
    lessons_change(e) {
      console.log(e)
      this.getCardLessonsList()
    },
    getCardEventRecord() {
      var params = {
        'card_id': this.id,
        'event_type': this.search.operate_id
      }
      cardEventRecord(params).then(response => {
        const {
          data
        } = response
        console.log(data)
        this.cardEvent = data
      }).catch(error => {
        console.log(error)
      })
    },
    getDiffDay(date_1, date_2) {
      if (date_1 && date_2) {
        let totalDays, diffDate
        const myDate_1 = new Date(date_1).setHours(0, 0, 0, 0)
        const myDate_2 = new Date(date_2).setHours(0, 0, 0, 0)
        diffDate = myDate_1 - myDate_2
        totalDays = Math.floor(diffDate / (1000 * 3600 * 24))
        return Math.abs(totalDays) + 1
      } else {
        return 0
      }
    },
    balanceBlur() {
      if (this.shuaVisible === 10) {
        this.ruleForm10.discount = null
        this.ruleForm10.add_bonus = null
      } else {
        this.ruleForm11.discount = null
        this.ruleForm11.add_bonus = null
      }
    },
    discountBlur() {
      if (this.shuaVisible === 10) {
        var balance = this.cardItem.balance ? Number(this.cardItem.balance) : 0
        var discount = this.ruleForm10.discount ? Number(this.ruleForm10.discount) : 0
        var add_bonus = this.ruleForm10.add_bonus ? Number(this.ruleForm10.add_bonus) : 0
        this.ruleForm10.balance = balance + discount + add_bonus
      } else {
        var balance = this.cardItem.balance ? Number(this.cardItem.balance) : 0
        var discount = this.ruleForm11.discount ? Number(this.ruleForm11.discount) : 0
        var add_bonus = this.ruleForm11.add_bonus ? Number(this.ruleForm11.add_bonus) : 0
        this.ruleForm11.balance = balance + discount + add_bonus
      }
    },
    amountBlur() {
      if (this.shuaVisible === 10) {
        var amount = this.cardItem.sell_price ? Number(this.cardItem.sell_price) : 0
        var discountAmount = this.ruleForm10.discount_amount ? Number(this.ruleForm10.discount_amount) : 0
        this.ruleForm10.amount = amount - discountAmount
      } else {
        var amount = this.cardItem.sell_price ? Number(this.cardItem.sell_price) : 0
        var discountAmount = this.ruleForm11.discount_amount ? Number(this.ruleForm11.discount_amount) : 0
        this.ruleForm11.amount = amount - discountAmount
      }
    },
    cardTypeChange(index, e) {
      console.log(index, e)
      this.getCardSearch2(index, e)
    },
    cardChange(e) {
      var dd = new Date()
      this.cardLists.forEach(item => {
        console.log(item)
        this.cardItem = item
        if (item.id === e) {
          var day = item.card_period_type === 1 ? item.card_period : item.card_period * 30
          dd.setDate(dd.getDate() + day)
          this.ruleForm10.cards_period = dd
          this.ruleForm10.balance = item.card_money
          this.ruleForm10.give_integral = item.card_give_integral
          this.ruleForm10.amount = item.sell_price
        }
      })
    },
    submitForm() {
      this.$refs[this.formName].validate((valid) => {
        if (valid) {
          switch (this.shuaVisible) {
            case 1:
              var data = {
                card_id: this.shuaItem.id,
                start_time: this.ruleForm1.start_time,
                end_time: this.ruleForm1.end_time,
                cost: this.ruleForm1.cost ? 1 : 0,
                cost_money: this.ruleForm1.cost_money,
                cost_pay_type: this.ruleForm1.cost_pay_type,
                notes: this.ruleForm1.notes,
                extend: 0
              }
              AskForLeave(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 3:
              var data = {
                card_id: this.shuaItem.id,
                end_time: this.ruleForm3.end_time,
                notes: this.ruleForm3.notes
              }
              saleLeave(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 4:
              var data = {
                card_id: this.shuaItem.id,
                end_time: this.ruleForm4.end_time,
                cost: this.ruleForm4.cost ? 1 : 0,
                cost_money: this.ruleForm4.cost_money,
                cost_pay_type: this.ruleForm4.cost_pay_type,
                notes: this.ruleForm4.notes,
                extend: 1
              }
              AskForLeaveExtend(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 5:
              var data = {
                card_id: this.shuaItem.id,
                start_time: this.ruleForm5.start_time,
                cost: this.ruleForm5.cost ? 1 : 0,
                cost_money: this.ruleForm5.cost_money,
                cost_pay_type: this.ruleForm5.cost_pay_type,
                notes: this.ruleForm5.notes
              }
              stopCard(data).then(response => {
                this.$message({
                  message: '成功',
                  type: 'success'
                })
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 7:
              var data = {
                card_id: this.shuaItem.id,
                name: this.ruleForm7.name,
                mobile: this.ruleForm7.mobile,
                code: this.ruleForm7.code
              }
              reportLoss(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 8:
              var data = {
                card_id: this.shuaItem.id,
                mobile: this.ruleForm8.mobile,
                code: this.ruleForm8.code
              }
              relieveReportLoss(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 9:
              var data = {
                card_id: this.shuaItem.id,
                card_number: this.ruleForm9.card_number,
                cost: this.ruleForm9.cost ? 1 : 0,
                cost_money: this.ruleForm9.cost_money,
                cost_pay_type: this.ruleForm9.cost_pay_type,
                notes: this.ruleForm9.notes
              }
              cardReplacement(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 11:
              var data = {
                card_id: this.shuaItem.id,
                cards_period: this.ruleForm11.cards_period,
                discount_amount: this.ruleForm11.discount_amount,
                add_bonus: this.ruleForm11.add_bonus,
                balance: this.ruleForm11.balance,
                discount: this.ruleForm11.discount,
                give_integral: this.ruleForm11.give_integral,
                pay_type: this.ruleForm11.pay_type,
                coupon_id: this.ruleForm11.coupon_id,
                amount: this.ruleForm11.amount,
                notes: this.ruleForm11.notes,
                card_type: this.ruleForm11.card_type,
                new_card_id: this.ruleForm11.new_card_id
              }
              cardUpgrade(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 12:
              var data = {
                card_id: this.shuaItem.id,
                cash_discount: this.ruleForm12.cost_money1,
                cost_money: this.ruleForm12.cost_money,
                out_money: this.ruleForm12.cost_money2,
                out_pay_type: this.ruleForm12.cost_pay_type,
                notes: this.ruleForm12.notes
              }
              cardRefund(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 13:
              var data = {
                card_id: this.shuaItem.id,
                mobile: this.ruleForm13.mobile,
                code: this.ruleForm13.code
              }
              this.getList()
              // relieveReportLoss(data).then(response => {
              // 	this.getList()
              // }).catch(error => {
              // 	console.log(error)
              // })
              break
            case 14:
              // 开卡
              var data = {
                card_id: this.shuaItem.id
              }
              ActCard(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
          }
        } else {
          this.$message.error('请按规则填写完整信息')
          return false
        }
      })
    },
    getSendCode(mobile) {
      var that = this
      sendCode({
        mobile: mobile
      }).then(response => {
        var {
          data
        } = response
        // 初始化定时器
        let t = null
        // 倒计时1分钟
        this.sec = 60
        // 计时器清零
        clearInterval(t)
        // that.sendcode()
        t = setInterval(() => {
          // 当倒计时完时，显示重新发送
          if (this.sec == 0) {
            clearInterval(t)
            return
          }
          // 实现倒计时效果
          this.sec--
        }, 1000)
      })
    },
    getAskForLeaveDetails(index, item) {
      AskForLeaveDetails({
        card_id: item.id
      }).then(response => {
        var {
          data
        } = response
        switch (index) {
          case 3:
            this.ruleForm3 = {
              end_time: new Date(),
              notes: null
            }
            this.formName = 'ruleForm3'
            break
          case 4:
            this.ruleForm4 = {
              end_time: data.now_end_time,
              cost: false,
              cost_money: null,
              cost_pay_type: 1,
              notes: null
            }
            this.formName = 'ruleForm4'
            break
          case 5:
            this.ruleForm5 = {
              start_time: new Date(),
              cost: false,
              cost_money: null,
              cost_pay_type: 1,
              notes: null
            }
            this.formName = 'ruleForm5'
            break
          case 9:
            this.ruleForm9 = {
              card_number: null,
              cost: false,
              cost_money: null,
              cost_pay_type: 1,
              notes: null
            }
            this.formName = 'ruleForm9'
            break
          case 10:
            this.ruleForm10 = {
              card_type: 2,
              new_card_id: null,
              cards_period: null,
              discount_amount: null,
              add_bonus: null,
              balance: null,
              discount: null,
              give_integral: null,
              pay_type: 1,
              coupon_id: null,
              amount: null,
              notes: null
            }
            this.getCardSearch2(index, 2)
            break
          case 11:
            this.ruleForm11 = {
              card_type: 2,
              new_card_id: null,
              cards_period: null,
              discount_amount: null,
              add_bonus: null,
              balance: null,
              discount: null,
              give_integral: null,
              pay_type: 0,
              coupon_id: null,
              amount: null,
              notes: null
            }
            this.getCardSearch2(index, 2)
            break
          case 12:
            this.ruleForm12 = {
              cost_money1: null,
              cost_money2: null,
              cost_money: null,
              cost_pay_type: 1,
              notes: null
            }
            this.formName = 'ruleForm12'
            break
        }
        this.shuaItem = data
        this.shuaVisible = index
      })
    },
    getCardGetUser(index, item) {
      cardGetUser({
        card_id: item.id
      }).then(response => {
        var {
          data
        } = response
        switch (index) {
          case 7:
            this.ruleForm7 = {
              name: data.realname,
              mobile: data.tel,
              code: null
            }
            this.formName = 'ruleForm7'
            break
          case 8:
            this.ruleForm8 = {
              mobile: data.tel,
              code: null
            }
            this.formName = 'ruleForm8'
            break
          case 13:
            this.ruleForm13 = {
              mobile: data.tel,
              code: null
            }
            this.formName = 'ruleForm13'
            break
          case 14:
            this.ruleForm14 = {
              cost: false,
              name: data.realname,
              mobile: data.tel,
              code: null
            }
            this.formName = 'ruleForm14'
            break
        }
        this.shuaItem = item
        this.shuaVisible = index
      })
    },
    getCardSearch2(index, type) {
      cardSearch2({
        card_type: type
      }).then(response => {
        var {
          data
        } = response
        this.cardLists = data
        var dd = new Date()
        switch (index) {
          case 10:
            if (this.cardLists.length > 0) {
              this.cardItem = this.cardLists[0]
              this.ruleForm10.new_card_id = this.cardLists[0].id
              var day = this.cardLists[0].card_period_type === 1 ? this.cardLists[0]
                .card_period : this.cardLists[0].card_period * 30
              dd.setDate(dd.getDate() + day)
              this.ruleForm10.cards_period = dd
              this.ruleForm10.balance = this.cardLists[0].card_money
              this.ruleForm10.give_integral = this.cardLists[0].card_give_integral
              this.ruleForm10.amount = this.cardLists[0].sell_price
            }
            this.formName = 'ruleForm10'
            break
          case 11:
            if (this.cardLists.length > 0) {
              this.cardItem = this.cardLists[0]
              this.ruleForm11.new_card_id = this.cardLists[0].id
              var day = this.cardLists[0].card_period_type === 1 ? this.cardLists[0]
                .card_period : this.cardLists[0].card_period * 30
              dd.setDate(dd.getDate() + day)
              this.ruleForm11.cards_period = dd
              this.ruleForm11.balance = this.cardLists[0].card_money
              this.ruleForm11.give_integral = this.cardLists[0].card_give_integral
              this.ruleForm11.amount = this.cardLists[0].sell_price
            }
            this.formName = 'ruleForm11'
            break
        }
        this.shuaVisible = index
      })
    },
    sahnchuClick(id) {
      this.$confirm('此操作将永久删除该会员卡, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cardDel({
          'card_id': id
        }).then(response => {
          const {
            data
          } = response
          this.back()
        }).catch(error => {
          console.log(error)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    shuaClick(index, item) {
      console.log(index)
      switch (index) {
        case 1:
          if (item.card_state === 1) {
            this.shuaItem = item
            this.ruleForm1 = {
              start_time: new Date(),
              end_time: new Date(),
              cost: false,
              cost_money: null,
              cost_pay_type: 1,
              notes: null
            }
            this.formName = 'ruleForm1'
            this.shuaVisible = index
          }
          break
        case 3:
        case 4:
          if (item.card_state === 2) {
            this.getAskForLeaveDetails(index, item)
          }
          break
        case 5:
          this.getAskForLeaveDetails(index, item)
          break
        case 6:
          if (item.card_state === 7) {
            this.$confirm('确定解除停卡吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              relieveStopCard({
                card_id: item.id
              }).then(response => {
                this.$message({
                  message: '成功',
                  type: 'success'
                })
                this.getList()
              })
            })
          }
          break
        case 7:
          if (item.card_state === 1 || item.card_state === 2 || item.card_state === 7) {
            this.getCardGetUser(index, item)
          }
          break
        case 8:
          if (item.card_state === 5) {
            this.getCardGetUser(index, item)
          }
          break
        case 9:
          if (item.card_state === 5) {
            this.shuaItem = item
            this.ruleForm9 = {
              card_number: null,
              cost: false,
              cost_money: null,
              cost_pay_type: 1,
              notes: null
            }
            this.formName = 'ruleForm9'
            this.shuaVisible = index
          }
          break
        case 10:
          if (item.card_state === 1) {
            this.shuaItem = item
            this.ruleForm10 = {
              card_type: 2,
              new_card_id: null,
              cards_period: null,
              discount_amount: null,
              add_bonus: null,
              balance: null,
              discount: null,
              give_integral: null,
              pay_type: 1,
              coupon_id: null,
              amount: null,
              notes: null
            }
            this.getCardSearch2(index, 2)
          }
          break
        case 11:
          if (item.card_state === 1 || item.card_state === 4) {
            this.shuaItem = item
            this.ruleForm11 = {
              card_type: 2,
              new_card_id: null,
              cards_period: null,
              discount_amount: null,
              add_bonus: null,
              balance: null,
              discount: null,
              give_integral: null,
              pay_type: 0,
              coupon_id: null,
              amount: null,
              notes: null
            }
            this.getCardSearch2(index, 2)
          }
          break
        case 12:
          if (item.card_state === 1 || item.card_state === 4 || item.card_state === 2 || item.card_state ===
							7) {
            this.shuaItem = item
            this.ruleForm12 = {
              cost_money1: null,
              cost_money2: null,
              cost_money: null,
              cost_pay_type: 1,
              notes: null
            }
            this.formName = 'ruleForm12'
            this.shuaVisible = index
          }
          break
        case 13:
          if (item.card_state === 1 || item.card_state === 4 || item.card_state === 2 || item.card_state ===
							7) {
            this.getCardGetUser(index, item)
          }
          break
        case 14:
          if (item.card_state === 4) {
            this.getCardGetUser(index, item)
          }
          break
      }
    },
    shuaVisibleClick() {
      this.shuaVisible = 0
      this.sec = 0
    },
    chooseImage() {
      this.dialogVisible = !this.dialogVisible
      // const input = document.createElement('input')
      // input.type = 'file'
      // input.accept = 'image/*'
      // input.click()
      // input.onchange = () => {
      //   const file = input.files[0]
      //   const imgs = URL.createObjectURL(file)
      //   this.option.img = imgs.img
      //   console.log(this.option)
      // }
    },
    navChange(e) {
      console.log(e)
    },
    back() {
      this.$router.go(-1)
    },
    getList() {
      var that = this
      this.shuaVisibleClick()
      getCardDetails({
        'card_id': this.id
      }).then(response => {
        const {
          data
        } = response
        that.cardDetail = data
      }).catch(error => {
        console.log(error)
      })
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    }
  }
}
</script>

<style>
	.monitor-yt-popover {
		border: 2px solid #84878d;
		padding: 20px;
	}

	.monitor-yt-popover .popper__arrow::after {
		border-bottom-color: #84878d !important;
		border-top-color: #84878d !important;
	}

	.monitor-yt-popover[x-placement^=bottom] .popper__arrow::after {
		top: 0px !important;
	}

	.monitor-yt-popover[x-placement^=top] .popper__arrow::after {
		bottom: 0px !important;
	}

	.btn-card-handle {
		width: 106px;
		height: 34px;
		margin: 0 20px 8px 0;
		line-height: 34px;
		text-align: center;
		cursor: pointer;
		background: #6b7cdd;
		border-radius: 6px;
		color: #fff;
	}

	.btn-bott {
		margin-bottom: 0;
	}

	.btn-card-handle:nth-child(even) {
		margin-right: 0;
	}

	.btn-card-handle-dis {
		background: #e3e3e3;
		color: #bfbfbf;
		cursor: default;
	}
</style>

<style lang="scss" scoped>
	.yh_content {
		padding: 20px;
	}

	.contents {
		width: 900px;
		/* border: 1px solid red; */
		margin: 0px auto;
		padding: 10px
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20rpx;

	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.touxiang {
		width: 124px;
		height: 77px;
		border-radius: 10px;
	}

	.thead {
		display: flex;
		align-items: center;
	}

	.small_title {
		font-size: 13px;
		color: #7c7c7c;
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.forms {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.forms_item {
		width: 49.5%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ededed;
		padding: 15px;
		margin-bottom: 5px
	}

	.left_title {
		letter-spacing: 2px;
		font-size: 14px
	}

	.buttom_btns {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50%;
		margin: 0px auto;
		margin-top: 50px;
		margin-bottom: 50px
	}

	.save {
		margin-right: 30px
	}

	.tback {
		display: flex;
		justify-content: right;
		width: 90%;
		margin: 0px auto;
	}

	.dialog-tips {
		height: 32px;
		line-height: 32px;
		background: #fff 8;
		padding: 0 15px;
		margin-top: 30px;
		margin-bottom: 10px;
		border: 1px dashed #6b7cdd;
		color: #6b7cdd;
	}

	::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #6b7cdd;
		border-color: #6b7cdd;
	}

	::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
		background-color: #ffffff;
		border-color: #DCDFE6;
	}

	::v-deep .el-checkbox__inner:hover {
		border-color: #DCDFE6;
	}

	::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #DCDFE6;
	}

	::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
		color: #606266;
	}

	::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
		border-color: #fdfeff;
	}

	.zhezhaoWH {
		max-height: 840px;
		overflow: auto;
	}
	::v-deep .el-tabs__item.is-active{
		color: #6b7cdd;
	}
	::v-deep .el-tabs__active-bar{
		background-color: #6b7cdd;
	}
	::v-deep .el-tabs__item:hover{
		color: #6b7cdd;
	}
</style>
